<template>
  <div class="right-box">
    <div class="show">场所状态</div>
    <div :class="{'act-show': true,'active':active === 0}" @click="state(0)">全部</div>
    <div :class="{'act-show': true,'active':active === 1}" @click="state(1)">正常</div>
    <div :class="{'act-show': true,'active':active === 2}" @click="state(2)">异常</div>
  </div>
</template>

<script>
export default {
	props:['devname'],
  name: 'ShowBox',
  data() {
    return {
      // 右上角按钮
      active: 0,
    }
  },
  watch: {
    '$store.state.user.district.city_name'(data) {
      this.active = 0
		},
		devname(data) {
			this.active = 0
		}
  },
  methods: {
    // 地图点,状态按钮
    state(data) {
      this.active = data
      this.$emit('state_change', data)
    }
  },
  mounted() {
  },
  destroyed() {
  },
}
</script>

<style lang="scss" scoped>
@import "../../../../../static/scss/common";
// 右上盒子
.right-box {
  width: 248px;
  height: 36px;
  background: #fff;
  position: absolute;
  right: 36px;
  top: 68px;
  box-shadow: 5px 5px 0px 0px rgba(34, 34, 34, 0.1);
  box-sizing: border-box;
  padding: 8px 0;

  div {
    float: left;
    color: $gray6;
    font-size: 12px;
    height: 100%;
    line-height: 20px;
    text-align: center;
  }
  .show {
    width: 79px;
    border-right: 1px solid #f2f2f2;
  }
  .act-show {
    width: 56px;
    color: $gray9;
    cursor: pointer;
  }
  .active {
    color: #eb3838;
  }
}
</style>
